<template>
  <CommonPage show-footer title="文章">
    <n-card
      min-w-840 title='约束选择' vertical>
      <n-space justify='space-around' size='large'>

        <n-space size='large'>
          <n-tag size='large' :bordered='false' type='success'>
            省份选择
          </n-tag>

          <n-tree-select
            min-w-500
            filterable
            :options='options'
            default-value='请输入省份'
            clearable
          />

          <n-button type='success'>确定</n-button>

        </n-space>
        <n-space size='large'>
          <n-tag size='large' :bordered='false' type='success'>
            地市选择
          </n-tag>

          <n-tree-select
            min-w-500
            filterable
            :options='options'
            default-value='请输入地市'
            clearable
          />

          <n-button type='success'>确定</n-button>

        </n-space>

      </n-space>
      <n-button style='display: block;margin:20px auto' type='error'>开始审批</n-button>

    </n-card>
  </CommonPage>
</template>

<script setup>
import { ref } from 'vue'

const options = ref()
options.value = [
  {
    label: 'Rubber Soul',
    key: 'Rubber Soul'
  },
  {
    label: 'Rubber Soul',
    key: 'Rub2ber Soul'
  },
  {
    label: 'Rubber Soul',
    key: 'Rub23ber Soul'
  },
  {
    label: 'Rubber Soul',
    key: 'Rubb324er Soul'
  },
  {
    label: 'Rubber Soul',
    key: 'Rubb34er Soul'
  }
]
</script>
